<template>
  <view class="container">
    <view class="header">
      <text class="title">API测试页面</text>
    </view>
    
    <view class="test-section">
      <view class="card">
        <text class="card-title">情话接口测试</text>
        <button @click="testQuoteApi" :disabled="loading.quote">测试情话接口</button>
        <view class="result" v-if="quoteResult">
          <text class="label">响应内容:</text>
          <text class="content">{{ JSON.stringify(quoteResult) }}</text>
        </view>
        <view class="error" v-if="quoteError">
          <text class="label">错误信息:</text>
          <text class="content">{{ quoteError }}</text>
        </view>
      </view>
      
      <view class="card">
        <text class="card-title">图片接口测试</text>
        <button @click="testPhotoApi" :disabled="loading.photo">测试图片接口</button>
        <view class="result" v-if="photoResult">
          <text class="label">响应内容:</text>
          <text class="content">{{ JSON.stringify(photoResult) }}</text>
        </view>
        <view class="error" v-if="photoError">
          <text class="label">错误信息:</text>
          <text class="content">{{ photoError }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDailyQuote, getBabyPhoto } from '@/api/mywork/webapi/index.js'

export default {
  data() {
    return {
      loading: {
        quote: false,
        photo: false
      },
      quoteResult: null,
      photoResult: null,
      quoteError: '',
      photoError: ''
    }
  },
  methods: {
    async testQuoteApi() {
      this.loading.quote = true
      this.quoteResult = null
      this.quoteError = ''
      
      try {
        console.log('开始测试情话接口...')
        const response = await getDailyQuote()
        console.log('情话接口响应:', response)
        this.quoteResult = response
      } catch (error) {
        console.error('情话接口测试失败:', error)
        this.quoteError = error.toString()
      } finally {
        this.loading.quote = false
      }
    },
    
    async testPhotoApi() {
      this.loading.photo = true
      this.photoResult = null
      this.photoError = ''
      
      try {
        console.log('开始测试图片接口...')
        const response = await getBabyPhoto()
        console.log('图片接口响应:', response)
        this.photoResult = response
      } catch (error) {
        console.error('图片接口测试失败:', error)
        this.photoError = error.toString()
      } finally {
        this.loading.photo = false
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: linear-gradient(to bottom, #667eea, #764ba2);
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 40rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.test-section {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

button {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: white;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

button[disabled] {
  background-color: #ccc;
}

.result, .error {
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.result {
  background-color: #e8f5e8;
}

.error {
  background-color: #ffe8e8;
}

.label {
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.content {
  font-size: 24rpx;
  word-wrap: break-word;
}
</style>